<template>
	<view>
		<ttBar title="课次查询" leftIcon="icon-back"></ttBar>
		<view class="classList" v-if="dataList.length">
			<block v-for="(item,index) in dataList">
				<view class="classRow" :key="index">
					<view class="titleRow">
						<text class="className">{{item.name}}</text>
						<text class="endDate" v-if="item.status==7">已退款</text>
					</view>
					<view class="row">
						<text class="studentName">学员姓名：{{item.member.name}}</text>
						<text class="shopName">[{{item.storeName}}]</text>
					</view>
					<view class="row">
						<text class="surplusTime">剩余{{(item.count+item.freeCount)-item.finCount}}课次</text>
						<text class="completedTime">(总共{{(item.count+item.freeCount)}}课次{{item.freeCount?'，含赠送'+item.freeCount+'课次':''}})</text>
					</view>
					<view class="btnRow">
						<text @tap="toPage" data-url="rollRecord" :data-id="item.order_id">查看点名记录</text>
						<text class="iconfont icon-right"  @tap="toPage" data-url="rollRecord" :data-id="item.order_id"></text>
					</view>
				</view>
			</block>
			
		</view>
		<emptyBox v-if="!dataList.length"></emptyBox>
		
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	computed: {
		...mapState({
			userInfo:state=>state.user.userInfo,
			isLogin: state => state.user.isLogin,
		})
	
	},
	data() {
		return {
			page_no:1,
			hasNext:true,
			dataList:[]
		};
	},
	methods:{
		getDate(){
			if(this.hasNext){
				this.$store.dispatch("apiGetClassTimeList",{
					page_no:this.page_no,
					page_size:10,
					// userId:94,
					userId:this.userInfo.userId
				}).then(res=>{
					console.log(res);
					this.dataList=this.dataList.concat(res.data.data.items);
					this.hasNext=res.data.data.hasNext;
					this.page_no=res.data.data.nextPage;
				})
			}else{
				uni.showToast({
					title: '没有更多的数据了',
					icon: 'none'
				});
			}
		}
	},
	onLoad() {
		this.getDate()
	},
	// 页面滚动到底部
	onReachBottom() {
		this.getDate()
	},
	// 下拉刷新
	onPullDownRefresh() {
		
		setTimeout(() => {
			this.dataList=[];
			this.page_no=1;
			this.hasNext=true;
			this.getDate();
			uni.stopPullDownRefresh();
			
		}, 1500)
	}
};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}
.classList {
	display: flex;
	flex-direction: column;
	padding-top: 20upx;

	.classRow {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding-top: 20upx;
		margin-bottom: 20upx;
		.titleRow {
			display: flex;
			align-items: center;
			padding: 0 42upx;
			justify-content: space-between;
			margin-bottom: 24upx;
			.className {
				font-size: 32upx;
				color: #202932;
				font-weight: bold;
			}
			.endDate {
				font-size: 24upx;
				color: #ffffff;
				background-color: #ffb432;
				height: 36upx;
				line-height: 36upx;
				border-radius: 18upx;
				padding: 0 16upx;
			}
		}
		.row {
			display: flex;
			align-items: center;
			padding: 0 42upx;
			margin-bottom: 16upx;
			font-size: 30upx;
			.studentName {
				color: #202932;
			}
			.shopName {
				color: #898989;
				margin-left: 10upx;
			}
			.surplusTime {
				color: #202932;
			}
			.completedTime {
				color: #898989;
				margin-left: 10upx;
			}
		}
		.btnRow {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 42upx;
			border-top: 1px solid #f0f0f0;
			height: 76upx;
			margin-top: 10upx;
			text {
				font-size: 32upx;
				color: #ffb432;
			}
			.iconfont {
				color: #d3d3d3;
				margin-left: 16upx;
			}
		}
	}
}
</style>
